<template>
    <el-row class="header_register" justify="space-between">
        <el-image style="width: auto; height: auto;" :src=imgUrl fit="none" @click="home" />
        <el-text style="color: white;font-size: xx-large; background-color: #fbaf5a;">
            注册
        </el-text>
    </el-row>
    <el-row type="flex" justify="center" style="align-content: center;height: 100%;margin-top: 2%">
        <el-form ref="ruleFormRef" style="width: 40%;" :model="ruleForm" :rules="rules" label-width="auto"
            :size="formSize" status-icon :label-position="labelPosition">
            <el-form-item label="昵称" prop="username">
                <el-input v-model="ruleForm.username" style="width: 100%" :rows="10" type="text" />
            </el-form-item>
            <el-form-item label="手机号码" prop="phoneNumber">
                <el-input v-model="ruleForm.phoneNumber" style="width: 100%" :rows="1" :maxlength="11"
                    :minlength="11" />
            </el-form-item>
            <el-form-item label="短信验证码" prop="code">
                <el-input v-model="code" style="width: 30%" :rows="1" :maxlength="6" :minlength="6" />
                <el-link style="color: #fbaf5a; margin-left: 5%;background-color: transparent;" :underline="false"
                    v-model:disabled="isEnable" @click="getCodeClick">{{ getVerifyCode }}</el-link>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password" style="width: 100%" :rows="1" type="password" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email" style="width: 100%" :rows="1" type="email" />
            </el-form-item>
            <el-divider content-position="center">扩展信息</el-divider>
            <el-form-item label="个人简介">
                <el-input v-model="ruleForm.description" style="width: 100%" :rows="10" type="textarea"
                    placeholder="简单描述一下你自己..." />
            </el-form-item>
            <el-form-item>
                <el-row style="width: 100%; align-content: center;margin-top: 5%;" justify="center">
                    <el-col :span="14">
                        <el-button style="background-color: #fbaf5a; color: white; width: 100%;height: 40px;"
                            @click="registerUser">注册</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
    </el-row>
</template>

<script lang="ts" setup>
import router from '../router/index.ts';
import { reactive, ref } from 'vue'
import { ComponentSize, FormInstance, FormRules, FormProps, ElMessage } from 'element-plus'
import { imgUrl } from '../assets/common/constants.ts';
import { agcAuth } from '../assets/agc/auth.ts';
import { UserModel } from '../assets/model/User.ts';
import { userRegister } from '../assets/net/NetUtils.ts';
import { userInfoStore } from '../assets/userStore/userStore.ts';


let intervalId: any = -1;
const countdownSeconds = ref<number>(60);
const getVerifyCode = ref<string>('获取验证码');
const isEnable = ref<boolean>(false);
const code = ref<string>()
const userStore = userInfoStore()
const labelPosition = ref<FormProps['labelPosition']>('top');
const formSize = ref<ComponentSize>('large');
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<UserModel>({
    uid: 0,
    username: '',
    password: '',
    phoneNumber: '',
    email: '',
    description: '',
});

const rules = reactive<FormRules<UserModel>>({
    uid: [],
    username: [
        {
            required: true,
            message: '请输入您的昵称',
            trigger: 'change'
        }
    ],
    password: [
        {
            required: true,
            message: '请输入您的密码',
            trigger: 'change',
        },
        {
            min: 8,
            max: 20,
            message: '密码长度为8-20位',
            trigger: 'blur'
        }
    ],
    phoneNumber: [
        {
            required: true,
            message: '请输入您的手机号码',
            trigger: 'change',
        }, {
            min: 11,
            max: 11,
            message: '请输入合法的手机号码',
            trigger: 'blur'
        }
    ],
    email: [
        {
            required: true,
            message: '请输入您的邮箱',
            trigger: 'change',
        },
    ]
});

const home = () => {
    router.replace({
        path: '/'
    })
};

const registerUser = () => {
    agcAuth.loginByVerifyCode(ruleForm.phoneNumber, code.value!)
        .then((value) => {
            ruleForm.uid = Number(value.getUser().getUid());
            userRegister(ruleForm)
                .then((value) => {
                    if (value === 200) {
                        clearInterval(intervalId);
                        userStore.update(ruleForm.uid, ruleForm.username, ruleForm.phoneNumber)
                        router.push("/");
                    }
                })
        })
};

const getCodeClick = () => {
    if (ruleForm.phoneNumber !== '') {
        agcAuth.getVerifyCode(ruleForm.phoneNumber)
            .then(() => {
                isEnable.value = true
                intervalId = setInterval(() => {
                    countdownSeconds.value--
                    getVerifyCode.value = `${countdownSeconds.value}s`
                    console.log(countdownSeconds);
                    if (0 == countdownSeconds.value) {
                        clearInterval(intervalId)
                        isEnable.value = false
                        countdownSeconds.value = 60
                        getVerifyCode.value = '获取验证码'
                    }
                }, 1000)
            })
    } else {
        ElMessage.error('手机号码不能为空！')
    }
};
</script>


<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.header_register {
    width: 100%;
    height: 90px;
    background-color: #fbaf5a;
    padding: 20px;
}
</style>